<!DOCTYPE html>
<html>
<head>
	<title>Detail Admin - UI Elements</title>
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
    <!-- bootstrap -->
    <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- libraries -->
    <link href="css/lib/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/lib/font-awesome.css" type="text/css" rel="stylesheet" />
    <link href="css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/compiled/elements.css" />
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
    
    <!-- this page specific styles -->
    <link rel="stylesheet" href="css/compiled/ui-elements.css" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

    <!-- navbar -->
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <button type="button" class="btn btn-navbar visible-phone" id="menu-toggler">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            
            <a class="brand" href="index.html"><img src="img/logo.png" /></a>

            <ul class="nav pull-right">                
                <li class="hidden-phone">
                    <input class="search" type="text" />
                </li>
                <li class="notification-dropdown hidden-phone">
                    <a href="#" class="trigger">
                        <i class="icon-warning-sign"></i>
                        <span class="count">8</span>
                    </a>
                    <div class="pop-dialog">
                        <div class="pointer right">
                            <div class="arrow"></div>
                            <div class="arrow_border"></div>
                        </div>
                        <div class="body">
                            <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                            <div class="notifications">
                                <h3>You have 6 new notifications</h3>
                                <a href="#" class="item">
                                    <i class="icon-signin"></i> New user registration
                                    <span class="time"><i class="icon-time"></i> 13 min.</span>
                                </a>
                                <a href="#" class="item">
                                    <i class="icon-signin"></i> New user registration
                                    <span class="time"><i class="icon-time"></i> 18 min.</span>
                                </a>
                                <a href="#" class="item">
                                    <i class="icon-envelope-alt"></i> New message from Alejandra
                                    <span class="time"><i class="icon-time"></i> 28 min.</span>
                                </a>
                                <a href="#" class="item">
                                    <i class="icon-signin"></i> New user registration
                                    <span class="time"><i class="icon-time"></i> 49 min.</span>
                                </a>
                                <a href="#" class="item">
                                    <i class="icon-download-alt"></i> New order placed
                                    <span class="time"><i class="icon-time"></i> 1 day.</span>
                                </a>
                                <div class="footer">
                                    <a href="#" class="logout">View all notifications</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="notification-dropdown hidden-phone">
                    <a href="#" class="trigger">
                        <i class="icon-envelope-alt"></i>
                    </a>
                    <div class="pop-dialog">
                        <div class="pointer right">
                            <div class="arrow"></div>
                            <div class="arrow_border"></div>
                        </div>
                        <div class="body">
                            <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                            <div class="messages">
                                <a href="#" class="item">
                                    <img src="img/contact-img.png" class="display" />
                                    <div class="name">Alejandra Galván</div>
                                    <div class="msg">
                                        There are many variations of available, but the majority have suffered alterations.
                                    </div>
                                    <span class="time"><i class="icon-time"></i> 13 min.</span>
                                </a>
                                <a href="#" class="item">
                                    <img src="img/contact-img2.png" class="display" />
                                    <div class="name">Alejandra Galván</div>
                                    <div class="msg">
                                        There are many variations of available, have suffered alterations.
                                    </div>
                                    <span class="time"><i class="icon-time"></i> 26 min.</span>
                                </a>
                                <a href="#" class="item last">
                                    <img src="img/contact-img.png" class="display" />
                                    <div class="name">Alejandra Galván</div>
                                    <div class="msg">
                                        There are many variations of available, but the majority have suffered alterations.
                                    </div>
                                    <span class="time"><i class="icon-time"></i> 48 min.</span>
                                </a>
                                <div class="footer">
                                    <a href="#" class="logout">View all messages</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle hidden-phone" data-toggle="dropdown">
                        Your account
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="personal-info.html">Personal info</a></li>
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Billing</a></li>
                        <li><a href="#">Export your data</a></li>
                        <li><a href="#">Send feedback</a></li>
                    </ul>
                </li>
                <li class="settings hidden-phone">
                    <a href="personal-info.html" role="button">
                        <i class="icon-cog"></i>
                    </a>
                </li>
                <li class="settings hidden-phone">
                    <a href="signin.html" role="button">
                        <i class="icon-share-alt"></i>
                    </a>
                </li>
            </ul>            
        </div>
    </div>
    <!-- end navbar -->

    <!-- sidebar -->
    <div id="sidebar-nav">
        <ul id="dashboard-menu">
            <li>                
                <a href="index.html">
                    <i class="icon-home"></i>
                    <span>Home</span>
                </a>
            </li>            
            <li>
                <a href="chart-showcase.html">                    
                    <i class="icon-signal"></i>
                    <span>Charts</span>
                </a>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-group"></i>
                    <span>Users</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="user-list.html">User list</a></li>
                    <li><a href="new-user.html">New user form</a></li>
                    <li><a href="user-profile.html">User profile</a></li>
                </ul>
            </li>
            <li>
                <a class="dropdown-toggle" href="#">
                    <i class="icon-edit"></i>
                    <span>Forms</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="form-showcase.html">Form showcase</a></li>
                    <li><a href="form-wizard.html">Form wizard</a></li>
                </ul>
            </li>
            <li>
                <a href="gallery.html">                    
                    <i class="icon-picture"></i>
                    <span>Gallery</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">                    
                    <i class="icon-calendar-empty"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li>
                <a href="tables.html">
                    <i class="icon-th-large"></i>
                    <span>Tables</span>
                </a>
            </li>
            <li class="active">
                <div class="pointer">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <a class="dropdown-toggle ui-elements" href="#">
                    <i class="icon-code-fork"></i>
                    <span>UI Elements</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="active submenu">
                    <li><a href="ui-elements.html" class="active">UI Elements</a></li>
                    <li><a href="icons.html">Icons</a></li>
                </ul>
            </li>
            <li>
                <a href="personal-info.html">
                    <i class="icon-cog"></i>
                    <span>My Info</span>
                </a>
            </li>
            <li>                
                <a class="dropdown-toggle" href="#">
                    <i class="icon-share-alt"></i>
                    <span>Extras</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    <li><a href="code-editor.html">Code editor</a></li>
                    <li><a href="grids.html">Grids</a></li>
                    <li><a href="signin.html">Sign in</a></li>
                    <li><a href="signup.html">Sign up</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end sidebar -->


	<!-- main container -->
    <div class="content">
        
        <!-- settings changer -->
        <div class="skins-nav">
            <a href="#" class="skin first_nav selected">
                <span class="icon"></span><span class="text">Default</span>
            </a>
            <a href="#" class="skin second_nav" data-file="css/skins/dark.css">
                <span class="icon"></span><span class="text">Dark skin</span>
            </a>
        </div>
        
        <div class="container-fluid">

            <div id="pad-wrapper">
                <div class="row-fluid section btns">
                    <!-- flat buttons -->
                    <!-- these styles are located in css/elements.css -->
                    <!-- they also include .small and .large classes to change their size -->
                    <h4 class="title">Flat Buttons</h4>
                    <div class="span6">
                        <table>
                            <tr>
                                <td><code>.btn-flat.inverse</code></td>
                                <td><a class="btn-flat inverse">INVERSE BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.white</code></td>
                                <td><a class="btn-flat white">WHITE BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.gray</code></td>
                                <td><a class="btn-flat gray">GRAY BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.default</code></td>
                                <td><a class="btn-flat">DEFAULT BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.primary</code></td>
                                <td><a class="btn-flat primary">PRIMARY BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.success</code></td>
                                <td><a class="btn-flat success">SUCCESS BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.info</code></td>
                                <td><a class="btn-flat info">INFO BUTTON</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-flat.danger</code></td>
                                <td><a class="btn-flat danger">DANGER BUTTON</a></td>
                            </tr>
                        </table>
                    </div>
                    <!-- end flat buttons -->

                    <!-- controls showcase -->
                    <div class="span5">
                        <div class="row ctrls">
                            <div class="btn-group large">
                                <button class="glow left"><i class="icon-link"></i></button>
                                <button class="glow middle"><i class="icon-random"></i></button>
                                <button class="glow middle"><i class="icon-fullscreen"></i></button>
                                <button class="glow right"><i class="icon-zoom-out"></i></button>
                            </div>
                            <div class="btn-group">
                                <button class="glow left active">LEFT</button>
                                <button class="glow right">RIGHT</button>
                            </div>
                            <div class="btn-group large audio">
                                <button class="glow left"><i class="icon-play"></i></button>
                                <button class="glow middle"><i class="icon-pause"></i></button>
                                <button class="glow right"><i class="icon-stop"></i></button>
                            </div>
                        </div>
                        <div class="row ctrls">
                            <div class="btn-flat icon"><i class="icon-github"></i> Fork me on github</div>
                            <div class="btn-glow"><i class="icon-wrench"></i> Icon button</div>                            
                            <div class="btn-group">
                                <button class="btn glow">Drop down</button>
                                <button class="btn glow dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Option one</a></li>
                                    <li><a href="#">Option two</a></li>
                                    <li><a href="#">Option three</a></li>
                                    <li><a href="#">Option four</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row ctrls">
                            <div class="pagination pull-left">
                                <ul>
                                    <li><a href="#">&#8249;</a></li>
                                    <li><a class="active" href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">&#8250;</a></li>
                                </ul>
                            </div>

                            <div class="pagination inverse pull-left">
                                <ul>
                                    <li><a href="#">&#8249;</a></li>
                                    <li><a class="active" href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">&#8250;</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row ctrls">
                            <input class="search" type="text" placeholder="Search input.." />
                            <div class="btn-group settings">
                                <button class="btn glow"><i class="icon-download-alt"></i></button>
                                <button class="btn glow dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Option one</a></li>
                                    <li><a href="#">Option two</a></li>
                                    <li><a href="#">Option three</a></li>
                                    <li><a href="#">Option four</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row ctrls">
                            <h4>Switch buttons</h4>
                            <div class="slider-frame">
                                <span data-on-text="ON" data-off-text="OFF" class="slider-button">OFF</span>
                            </div>
                            <div class="slider-frame primary">
                                <span data-on-text="ON" data-off-text="OFF" class="slider-button">OFF</span>
                            </div>
                            <div class="slider-frame info">
                                <span data-on-text="ON" data-off-text="OFF" class="slider-button">OFF</span>
                            </div>
                        </div>                        
                    </div>
                    <!-- end controls showcase -->
                </div>
                <div class="row-fluid section btns">
                    <!-- glow buttons -->
                    <!-- these styles are located in css/elements.css -->
                    <!-- they also include .small and .large classes to change their size -->
                    <div class="span6">
                        <h4 class="title">Glow buttons</h4>
                        <table>
                            <tr>
                                <td><code>.btn-glow</code></td>
                                <td><a class="btn-glow">Sign up now</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-glow.inverse</code></td>
                                <td><a class="btn-glow inverse">Sign up now</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-glow.primary</code></td>
                                <td><a class="btn-glow primary">Sign up now</a></td>
                            </tr>
                            <tr>
                                <td><code>.btn-glow.success</code></td>
                                <td><a class="btn-glow success">Sign up now</a></td>
                            </tr>
                        </table>
                    </div>
                    <!-- end glow buttons -->

                    <!-- sliders -->
                    <div class="span5">
                        <h4 class="title">Sliders</h4>
                        <div class="sliders">
                            <div class="slider slider-sample1 vertical-handler"></div>
                            <div class="slider slider-sample2"></div>
                            <div class="slider slider-sample3"></div>
                            <div class="slider success slider-sample2"></div>
                            <div class="slider success slider-sample3"></div>
                            <div class="slider info slider-sample2"></div>
                            <div class="slider info slider-sample3"></div>
                        </div>                        
                    </div>
                    <!-- end sliders -->
                </div>
                <div class="separator"></div>
                <!-- custom dialogs -->
                <div class="row-fluid section dialogs">
                    <div class="span4">
                        <h4>Datepicker inline</h4>
                        <div class="pop-dialog">
                            <div class="pointer">
                                <div class="arrow"></div>
                                <div class="arrow_border"></div>
                            </div>
                            <div class="body">
                                <div id="inline-datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <h4>Menu</h4>
                        <div class="pop-dialog">
                            <div class="pointer">
                                <div class="arrow"></div>
                                <div class="arrow_border"></div>
                            </div>
                            <div class="body">
                                <div class="menu">
                                    <a href="#" class="item">Profile</a>
                                    <a href="#" class="item">My tasks</a>
                                    <a href="#" class="item">Deals</a>
                                    <a href="#" class="item">Terms of service</a>
                                    <a href="#" class="item">Privacy policy</a>
                                    <div class="footer">
                                        <a href="#" class="logout">Log out</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <h4>Settings window</h4>
                        <div class="pop-dialog full">
                            <div class="pointer">
                                <div class="arrow"></div>
                                <div class="arrow_border"></div>
                            </div>
                            <div class="body">                        
                                <div class="settings">
                                    <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                                    <div class="items">
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" class="check" />
                                        </div>
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" checked="checked" class="check" />
                                        </div>
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" checked="checked" class="check" />
                                        </div>
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" class="check" />
                                        </div>
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" checked="checked" class="check" />
                                        </div>
                                        <div class="item">
                                            <i class="icon-reorder"></i>
                                            List item
                                            <input type="checkbox" class="check" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end custom dialogs -->

                <div class="separator"></div>
                <div class="section">
                    <!-- alerts -->
                    <h4 class="title">Alerts</h4>
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="alert alert-info">
                                <i class="icon-exclamation-sign"></i>
                                Do you want to get these resources for as little as $0.70 each?
                            </div>
                            <div class="alert alert-success">
                                <i class="icon-ok-sign"></i> Your order has been placed.
                            </div>
                        </div>
                        <div class="span6">
                            <div class="alert">
                                <i class="icon-warning-sign"></i>
                                Password strength is low.
                            </div>
                            <div class="alert alert-error">
                                <i class="icon-remove-sign"></i>
                                Unexpected error. Please try again later.
                            </div>
                        </div>
                    </div>
                    <!-- end alerts -->
                </div>
            </div>
        </div>
    
    <!-- end main container -->


	<!-- scripts -->
    <script src="js/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui-1.10.2.custom.min.js"></script>
    <script src="js/bootstrap.datepicker.js"></script>

    <!-- call all plugins -->
    <script src="js/theme.js"></script>

    <!-- initialize this page scripts -->
    <script type="text/javascript">
        $(function () {

            // Inline datepicker
            $("#inline-datepicker").datepicker();



            // jQuery UI Sliders
            $(".slider-sample1").slider({
                value: 100,
                min: 1,
                max: 500
            });
            $(".slider-sample2").slider({
                range: "min",
                value: 130,
                min: 1,
                max: 500
            });
            $(".slider-sample3").slider({
                range: true,
                min: 0,
                max: 500,
                values: [ 40, 170 ],
            });



            // Switch slide buttons
            $('.slider-button').click(function() {
                if ($(this).hasClass("on")) {
                    $(this).removeClass('on').html($(this).data("off-text"));   
                } else {
                    $(this).addClass('on').html($(this).data("on-text"));
                }
            });

        });
    </script>

</body>
</html>